<template>
    <div class="order_detail">
        <header class="top_bar hd">
            <a @click="gotoPage()" class="icon_back"></a>
            <h3 class="cartname">订单详情</h3>
        </header>
        <main class="order_box">
            <div class="share_quality_left not_eng_box bg" style="margin-bottom: 50px;">
                <span class="xd">下单时间：{{orderInfo.addTime}}</span>
                <span class="db_1">订单编号：{{orderInfo.orderSn}}</span>
                <span class="jg_1">实付：<font style="color:red;">￥{{orderInfo.actualPrice}}</font></span>
                <mt-button class="qx" v-show="orderInfo.orderStatus == 101" plain type="danger" size="small" @click="cancelOrder" style="background-color:red;">
                    <font style="color:#FFFFFF">取消订单</font>
                </mt-button>
                <mt-button class="fk" v-show="orderInfo.orderStatus == 101" plain type="danger" size="small" @click="prepayOrder" style="background-color:red;">
                    <font style="color:#FFFFFF">去付款</font>
                </mt-button>
                <mt-button class="qr" v-show="orderInfo.orderStatus == 301" plain type="danger" size="small" @click="confirmOrder" style="background-color:red;">
                    <font style="color:#FFFFFF">确认收货</font>
                </mt-button>
                <mt-button class="tk" v-show="orderInfo.orderStatus == 201" plain type="danger" size="small" @click="exchangeOrder" style="background-color:red;">
                    <font style="color:#FFFFFF">申请退款</font>
                </mt-button>
                <div class="td_2"></div>
                <span class="sx">商品信息</span>
                <span class="zt_1">{{orderInfo.orderStatusText}}</span>
                <ul>
                    <li v-for="item in orderGoods" :key="item">
                        <img v-lazy="item.picUrl" alt="" class="not_eng_pic lazy-img-fadein img_1">
                        <span class="li_1">{{item.goodsName}}</span>
                        <span class="li_2">x{{item.number}}</span>
                        <span class="li_3">{{item.goodsSpecificationValues}}</span>
                        <span class="li_4">￥{{item.retailPrice}}</span>
                    </li>
                </ul>
                <div class="td_3"></div>
                <span class="span_1">{{orderInfo.consignee}}</span>
                <span class="span_2">{{orderInfo.mobile}}</span>
                <span class="span_3">{{orderInfo.address}}</span>
                <span class="span_4">商品合计：￥{{orderInfo.goodsPrice}}</span>
                <span class="span_5">实付：￥{{orderInfo.actualPrice}}</span>
                <div class="td_4"></div>
            </div>
        </main>
    </div>
</template>
<script>
import { Button, MessageBox } from '../../node_modules/mint-ui'
export default {
  mounted() {
    this.status = this.$route.params.status
    this.orderSn = this.$route.params.orderSn
    this.fetchData(this.$route.params.id)
  },
  data() {
    return {
      orderInfo: {},
      orderGoods: [],
      status: 0,
      orderSn: ''
    }
  },
  watch: {
    $route(to) {
      var reg = /orderDetail\/\d+/
      if (reg.test(to.path)) {
        var id = this.$route.params.id || 0
        this.fetchData(id)
      }
    }
  },
  methods: {
    gotoPage() {
      var _this = this
      _this.$router.push('/order/' + _this.status)
    },
    fetchData(id) {
      var _this = this
      let uObj = JSON.parse(window.sessionStorage.userInfo)
      let userId = uObj.id
      _this.$http
        .get('/mechanismadmin/mobile/orderDetail', {
          params: {
            userId: userId,
            orderId: id
          }
        })
        .then(
          res => {
            _this.orderInfo = res.data.data.orderInfo
            _this.orderGoods = res.data.data.orderGoods
          },
          err => {
            console.log(err)
          }
        )
    },
    cancelOrder() {
      MessageBox.confirm('', {
        message: '确定要取消此订单？'
      })
        .then(action => {
          if (action == 'confirm') {
            //确认的回调
            var _this = this
            let uObj = JSON.parse(window.sessionStorage.userInfo)
            let userId = uObj.id
            _this.$http
              .get('/mechanismadmin/mobile/cancelOrder', {
                params: {
                  userId: userId,
                  orderId: _this.orderInfo.id
                }
              })
              .then(
                res => {
                  MessageBox.alert('取消订单成功').then(action => {
                    _this.$router.push('/order/' + _this.status)
                  })
                },
                err => {
                  MessageBox.alert('取消失败').then(action => {
                    _this.$router.push('/order/' + _this.status)
                  })
                }
              )
          }
        })
        .catch(err => {
          if (err == 'cancel') {
            //取消的回调
          }
        })
    },
    prepayOrder() {
      var _this = this
      _this.$router.push({
        path: '/cartpay',
        query: {
          orderSn: this.orderSn
        }
      })
    },
    confirmOrder() {
      MessageBox.confirm('', {
        message: '确认收货？'
      })
        .then(action => {
          if (action == 'confirm') {
            //确认的回调
            var _this = this
            let uObj = JSON.parse(window.sessionStorage.userInfo)
            let userId = uObj.id
            _this.$http
              .get('/mechanismadmin/mobile/confirmOrder', {
                params: {
                  userId: userId,
                  orderId: _this.orderInfo.id
                }
              })
              .then(
                res => {
                  MessageBox.alert('确认收货成功！').then(action => {
                    _this.$router.push('/order/' + 3)
                  })
                },
                err => {
                  MessageBox.alert('确认收货失败！').then(action => {
                    _this.$router.push('/order/' + 3)
                  })
                }
              )
          }
        })
        .catch(err => {
          if (err == 'cancel') {
            //取消的回调
          }
        })
    },
    exchangeOrder() {
      MessageBox.confirm('', {
        message: '确定要取消此订单？'
      })
        .then(action => {
          if (action == 'confirm') {
            //确认的回调
            var _this = this
            let uObj = JSON.parse(window.sessionStorage.userInfo)
            let userId = uObj.id
            _this.$http
              .get('/mechanismadmin/mobile/exchangeOrder', {
                params: {
                  userId: userId,
                  orderId: _this.orderInfo.id
                }
              })
              .then(
                res => {
                  MessageBox.alert('取消订单成功').then(action => {
                    _this.$router.push('/order/' + 2)
                  })
                },
                err => {
                  MessageBox.alert('取消失败').then(action => {
                    _this.$router.push('/order/' + 2)
                  })
                }
              )
          }
        })
        .catch(err => {
          if (err == 'cancel') {
            //取消的回调
          }
        })
    }
  }
}
</script>
<style>
@import '../assets/css/order.css';
</style>